* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media screen and(min-width: 769px) {
  html, body {
    width: 460px;
    margin: 0 auto;
  }

  body{
    // padding: 10px 0;
    box-shadow: 0 0 30px gray;
  }
}

a {
  position: relative;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #3F51B5;
  transform: scaleX(0);
  transition: .3s ease-in-out;
}
a:hover::after {
  transform: scaleX(1);
  transition: .3s ease-in-out;
}
.hover {
  transform: scaleX(1);
  transition: .3s ease-in-out;
}

.rotate {
  animation: imgRotate 9s linear infinite;
}

@keyframes imgRotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.fade-enter-active {
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-active {
  transform: translateX(10px);
  opacity: 0;
}
